<template>
  <div class="main">
    <eagle-card :title="form.ResName">
      <template #thumb>
        <eagle-image
          width="50"
          height="50"
          :src="require('@/assets/Images/AppIcon/icon_task_icon.png')"
        />
      </template>
    </eagle-card>
    <eagle-cell center>
      <template #title>
        <span class="custom-title">学习进度：</span>
      </template>
      <template #default>
        <span>完成：{{ form.CurrentProgress }}%</span>
      </template>
    </eagle-cell>
    <div class="progress">
      <div style="padding: 8px">
        <eagle-progress :show-pivot="false" :percentage="form.CurrentProgress" />
      </div>

      <div class="viewcount">
        <eagle-image
          style="vertical-align: middle"
          width="13"
          height="9"
          :src="require('@/assets/Images/AppIcon/icon_ask_view.png')"
        />
        {{ form.ViewCnt }}
        <eagle-image
          style="vertical-align: middle; margin-left: 5px"
          width="11"
          height="10"
          :src="require('@/assets/Images/AppIcon/icon_heart_off.png')"
        />
        {{ form.CollectCnt }}
      </div>
    </div>
    <div class="coursedetail" style="margin-top: 5px">
            <div class="home-content">
        <eagle-list style="margin: 5px">
          <div class="plan-list">
            <div
              class="plan-detail mb-10"
              v-for="(item, index) in form.Details"
              :key="index"
              @click="handleClick(item)"
            >
              <div class="plan-detail-hd mb-10">
                <div>
                  <span class="circular">
                    <span class="circular_num" style="">{{ index + 1 }}</span>
                  </span>
                </div>

                <!-- <img
									src="@/assets/Images/AppIcon/icon_studyplan_icon.png"
									alt=""
								/> -->
                <div class="mt-5">
                  <div class="plan-detail-title mb-10">{{ item.Title }}</div>
                  <div class="plan-detail-describe">
                    {{ item.Name }}
                  </div>
                  <div class="plan-detail-describe">
                    学时： {{ item.StandardStudyHours }} 分钟
                  </div>
                </div>
              </div>
            </div>
          </div>
        </eagle-list>
      </div>
      <!-- <van-cell v-for="(item, index) in form.Details" :key="index">
        <van-card
          :title="item.Name"
          :thumb="require('@/assets/Images/AppIcon/icon_cou_default.jpg')"
        >
          <template #desc>
            <div>学时：{{ item.StandardStudyHours }}</div>
          </template>
        </van-card>
      </van-cell> -->
    </div>

    <div class="bottom-btns">
      <div class="title">
        您已经完成了一个<span style="color: green">{{ this.already }}</span
        >知识，还剩{{ this.total - this.already }}个知识，继续加油！
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      id: this.$route.query.id,
      form: {
        CurrentProgress: 0,
      },
      already: 0,
      border: false,
      fileList: [],
      total: 0,
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      let params = { id: this.id };
      let _this = this;
      _this.$axios
      .get("/TrainRes/GetDetail",{params:params})
      .then((res)=>{
        _this.form = res.data;
        _this.already = 0;
        if (res.data.Details.length > 0) {
          _this.total = res.data.Details.length;
          res.data.Details.map((item, index) => {
            if (item.CurrentProgress == 100) {
              _this.already++;
            }
          });
        }
      })
    },
      handleClick(item) {
        this.$router.push({
          path: "/Train/WareDetail",
					query: { id: item.ID,sid: item.SID,stype:item.SType },
      });
    },
  },
};
</script>

<style lang="less" scoped>
/*
        .main {
            height: 100vh;
        }
    */
.home-content {
  background-color: #ffff;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;
    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}

.plan-detail {
  width: 100%;
  //background-color: #fff;
  padding: 10px;
  color: #333;
  font-size: 10px;
  position: relative;
  .plan-detail-tag {
    position: absolute;
    top: 40%;
    right: 10px;
  }
}
.plan-detail-hd {
  display: flex;
  img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  .plan-detail-title {
    font-size: 14px;
    color: #000;
  }
  span {
    color: #666;
  }
}

.plan-detail-describe {
  margin-top:5px;
  width: 100%;
  line-height: 1.2;
  // word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
  word-break: break-all;
}

.circular {
  border-radius: 20%;
  height: 40px;
  width: 40px;
  margin-top: 10px;
  margin-right: 5px;
  display: inline-block;
  background: #57beda;
  .circular_num {
    display: block;
    color: #ffffff;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  //   vertical-align: top;
}

.van-card__thumb {
  width: 60px;
  height: 60px;
}
.van-card__content {
  min-height: 65px;
}

.progress {
  background-color: #fff;
  font-size: 12px;
  .viewcount {
    padding: 8px;
  }
}

.det_top_box {
  padding: 10px;
  background-color: #e8f1f8;
}

.detail_header {
  color: #ffffff;
  background: url("../../../assets/Images/AppIcon/image_riskunit_detail_bg.png");
  background-size: cover;
  padding: 10px;
  border-radius: 5px;
  /*background-color: #fff;*/

  .det_top {
    display: flex;
    justify-content: space-between;

    .dep_top_img {
      height: 20px;
      width: 20px;
      margin-right: 5px;
    }
  }

  .det_name {
    margin-top: 20px;
    text-align: center;
  }

  .det_location {
    text-align: center;
    margin-bottom: 20px;
  }
}
.det_tab {
  padding: 10px;
  .det_tab_item {
    padding: 10px 0;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;

    .det_tab_item_text {
      padding: 0 10px;
    }
  }
}

.text_box {
  padding: 10px;
  border-radius: 5px;
  /*background-color: #e8f1f8;*/
  margin-bottom: 10px;

  .text_top {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .top_link {
      color: #1989fa;
    }
  }

  .text_item {
    display: flex;
    justify-content: space-between;
    margin-left: 10px;

    .item_link {
      color: #1989fa;
    }
  }

  .text_img {
    display: flex;
    align-items: center;

    .img_item {
      width: 33.3%;
      text-align: center;

      img {
        height: 25px;
        width: 25px;
        margin-bottom: 10px;
      }
    }
  }

  .text_history {
    display: flex;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .text_member {
    color: #1989fa;
    margin-bottom: 10px;
  }

  .text_total_img {
    display: flex;
    align-items: center;

    .img_item {
      width: 33.3%;
      text-align: center;

      .img_item_top {
        display: flex;
        vertical-align: middle;
        margin-bottom: 10px;
      }
      img {
        height: 15px;
        width: 15px;
        margin-right: 5px;
      }
    }
  }
  .text_record_list {
    .list_row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      > div {
        width: 33.3%;
      }
      .row_center {
        text-align: center;
      }
      .row_right {
        text-align: right;
      }
    }
  }
}
.operate_det {
  background-color: #fff;
  padding: 10px;
  .operate_list {
    border: 1px solid #e8f1f8;
    .operate_row_first {
      padding: 10px;
      background-color: #e8f1f8;
      border-bottom: 1px solid #e8f1f8;
      margin-bottom: 10px;
    }
    .operate_row {
      padding: 10px;
      border-bottom: 1px solid #e8f1f8;
      /*margin-bottom: 10px;*/
    }
  }
}

.bottom-btns {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0px;
  background-color: #fff;
  .title {
    width: 100%;
    height: 30px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
